<!doctype html>
<html>
<head>
  <title>Vis Network | Data | DOT edge styles</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="../../../../standalone/umd/vis-network.min.js"></script>

  <style type="text/css">
    body, html {
      font: 10pt sans;
      line-height: 1.5em;;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      color: #4d4d4d;
      box-sizing: border-box;
      overflow: hidden;
    }

    #header {
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
    }

    #contents {
      height: 100%;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
    }

    #left, #right {
      position: absolute;
      margin: 0;
      padding: 10px;
      box-sizing: border-box;
      display: inline-block;
    }

    #left {
      width: 40%;
      height: 80%;
      top: 0;
      left: 0;
    }

    #right {
      width: 60%;
      height: 100%;
      top: 0;
      right: 0;
    }

    #error {
      color: red;
    }

    #data {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
      resize: none;
    }

    #draw, #reset {
      padding: 5px 15px;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
    }

    a:hover {
      color: red;
    }

  </style>

</head>
<body>

<div id="header">
  <h1>DOT edge styles</h1>

  <div>
    <p>
      Example of edge styles support.
    </p>

    <table border=1>
      <tr>
        <th>Attributes</th><th>Desriptions</th>
      </tr>
      <tr>
        <td align="center">label</td><td>Text displayed on the edge</td>
      </tr>
      <tr>
        <td align="center">color</td><td>Edge color</td>
      </tr>
      <tr>
        <td align="center">style</td>
        <td>Edge style ("solid", "dashed", "dotted")</td>
      </tr>
      <tr>
        <td align="center">dir</td>
        <td>Arrow direction ("forward", "both", "back", "none"), default is "forward"</td>
      </tr>
      <tr>
        <td align="center">arrowhead, arrowtail</td>
        <td>Arrow style ("dot", "box", "crow", "curve", "icurve", "normal", "inv", "diamond", "tee", "vee")</td>
      </tr>
      <tr>
        <td align='center'>width or penwidth</td>
        <td>Edge width</td>
      </tr>
    </table>
  </div>

</div>

<div id="contents">
  <div id="left">
    <textarea id="data">
    </textarea>
    <div>
      <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
      <button id="reset" title="Reset the DOT graph">Reset</button>
    </div>
    <div>
      <span id="error"></span>
    </div>
  </div>
  <div id="right">
    <div id="mynetwork"></div>
  </div>
</div>

<script type="text/javascript">
  var dotDefault = 'digraph {\n' +
    ' // Parent nodes\n' +
    ' lines[label="LINES"]; \n' +
    ' ahs[label="ARROW HEADS"]; \n' +
    '\n' +
    ' // Children nodes\n' +
    ' dot[label="both dot"]; \n' +
    ' vee[label="back vee"]; \n' +
    ' diamond[label="diamond and box"]; \n' +
    '\n' +
    ' // Line styles\n' +
    ' lines -- solid[label="solid pink", color="pink"]; \n' +
    ' lines -- penwidth[label="penwidth=5", penwidth=5]; \n' +
    ' lines -- dashed[label="dashed green", style="dashed", color="green"]; \n' +
    ' lines -- dotted[label="dotted purple", style="dotted", color="purple"]; \n' +
    '\n' +
    ' // Arrowhead styles\n' +
    ' ahs -> box[label="box", arrowhead=box]; \n' +
    ' ahs -> crow[label="crow", arrowhead=crow]; \n' +
    ' ahs -> curve[label="curve", arrowhead=curve]; \n' +
    ' ahs -> icurve[label="icurve", arrowhead=icurve]; \n' +
    ' ahs -> normal[label="normal", arrowhead=normal]; \n' +
    ' ahs -> inv[label="inv", arrowhead=inv]; \n' +
    ' ahs -> diamond[label="diamond and box", dir=both, arrowhead=diamond, arrowtail=box]; \n' +
    ' ahs -> dot[label="both dot", dir=both, arrowhead=dot, arrowtail=dot]; \n' +
    ' ahs -> tee[label="tee", arrowhead=tee]; \n' +
    ' ahs -> vee[label="back vee", dir=back, arrowtail=vee]; \n' +
    '}';

  // create a network
  var container = document.getElementById('mynetwork');
  var options = {
    physics: {
      stabilization: false,
      barnesHut: {
        springLength: 200
      }
    }
  };
  var data = {};
  var network = new vis.Network(container, data, options);

  $('#draw').click(draw);
  $('#reset').click(reset);

  $(window).resize(resize);
  $(window).load(draw);

  $('#data').keydown(function (event) {
    if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
      draw();
      event.stopPropagation();
      event.preventDefault();
    }
  });

  function resize() {
    $('#contents').height($('body').height() - $('#header').height() - 30);
  }

  function draw () {
    try {
      resize();
      $('#error').html('');

      // Provide a string with data in DOT language
      data = vis.parseDOTNetwork($('#data').val());

      network.setData(data);
    }
    catch (err) {
      // set the cursor at the position where the error occurred
      var match = /\(char (.*)\)/.exec(err);
      if (match) {
        var pos = Number(match[1]);
        var textarea = $('#data')[0];
        if(textarea.setSelectionRange) {
          textarea.focus();
          textarea.setSelectionRange(pos, pos);
        }
      }

      // show an error message
      $('#error').html(err.toString());
    }
  }

  function reset() {
    $('#data').val(dotDefault);
    draw();
  }

  window.onload = function() {
    reset();
  }
</script>
</body>
</html>
